<template>
  <div class="WG2">
    <div style="width: 100%">
      <el-row :gutter="10" style="width: 100%">
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <transition>
          <div class="Left" v-if="activeMainIndex===1">
            <div class="LeftTitle">我们是威高 ——————</div>
            <div class="LeftOne">打造全球化<br/>医疗器械和医药创新型企业</div>
            <div class="LeftTwo">
              威高集团秉承科技创新，专注于提升研发和管理能力，紧跟医疗产业发展，提供全周期、安全可靠的医疗系统整体解决方案，致力于成为全球化医疗器械和医药创新型企业，推动全球健康事业的进步。
            </div>
          </div>
          </transition>

        </el-col>
        <el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="Right">
            <div class="RightTop">
              <transition>
              <div v-if="activeMainIndex===1" class="RightTopOne">
                <div>始建于</div>
                <div><span class="RightTitle">{{Year}}</span>年</div>
              </div>
              </transition>
              <transition>
              <div v-if="activeMainIndex===1" class="RightTopTwo">
                <div>拥有专利</div>
                <div><span class="RightTitle">{{ZL}}</span>+</div>
              </div>
              </transition>
            </div>

            <div class="RightBottom">
              <transition>
              <div v-if="activeMainIndex===1" class="RightBottomOne">
                <div>中国企业</div>
                <div><span class="RightTitle">{{QYPM}}</span>强</div>
              </div>
              </transition>
              <transition>
              <div v-if="activeMainIndex===1" class="RightBottomTwo">
                <div>合作客户</div>
                <div><span class="RightTitle">{{HZKH}}</span>+</div>
              </div>
              </transition>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <div class="Bottom">
      <el-row>
        <el-col :xs="12" :sm="12" :md="12" :lg="12" :xl="12">
          <div class="BottomOne">
            <el-row :gutter="10">
              <el-col :xs="12" :sm="8" :md="8" :lg="5" :xl="4">
                <transition>
                <div v-if="activeMainIndex===1" class="TitleButtonOne">探索威高
                  <svg
                      class="icon"
                      viewBox="0 0 23 10"
                      xmlns="http://www.w3.org/2000/svg"
                      width="2rem" height="1rem">
                    <path
                        class="iconPath"
                        stroke-linecap="round"
                        stroke="white"
                        stroke-width="1.52941"
                        d="M0.912109 8.25H21.3187C21.9889 8.25 22.3349 7.44921 21.8756 6.96119L16.9709 1.75"
                    />
                  </svg>
                </div>
                </transition>
              </el-col>
              <el-col :xs="12" :sm="8" :md="8" :lg="5" :xl="4">
                <transition>
                <div v-if="activeMainIndex===1" class="TitleButtonTwo">播放影片
                  <svg
                      class="icon"
                      viewBox="0 0 23 10"
                      xmlns="http://www.w3.org/2000/svg"
                      width="2rem" height="1rem">
                    <path
                        class="iconPath"
                        stroke-linecap="round"
                        stroke="white"
                        stroke-width="1.52941"
                        d="M0.912109 8.25H21.3187C21.9889 8.25 22.3349 7.44921 21.8756 6.96119L16.9709 1.75"
                    />
                  </svg>
                </div>
                </transition>
              </el-col>
            </el-row>


          </div>
          <div class="BottomTwo">
            <transition>
            <div class="BottomTwoOne" v-if="activeMainIndex===1">
              <div><img src="../../../../assets/WeGao/svg/1.svg"></div>
              <div class="BottomTwoTitle">威高文化<img src="../../../../assets/WeGao/svg/right.svg"></div>
            </div>
            </transition>
            <transition>
            <div class="BottomTwoTwo" v-if="activeMainIndex===1">
              <div><img src="../../../../assets/WeGao/svg/2.svg"></div>
              <div class="BottomTwoTitle">威高大事件<img src="../../../../assets/WeGao/svg/right.svg"></div>
            </div>
            </transition>
            <transition>
            <div class="BottomTwoThree" v-if="activeMainIndex===1">
              <div><img src="../../../../assets/WeGao/svg/3.svg"></div>
              <div class="BottomTwoTitle">威高荣誉<img src="../../../../assets/WeGao/svg/right.svg"></div>
            </div>
            </transition>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>

</template>

<script setup>
import {onMounted, ref, toRefs} from "vue";


defineOptions({name: "WeGao2"})
const props= defineProps({
  activeMainIndex: {
    type: Number,
    default: 0
  },
})
const {activeMainIndex}=toRefs(props)
onMounted(()=>{
  GetIncreaseToTargetYear(0,1988)
  GetIncreaseToTargetHZKH(0,10000)
  GetIncreaseToTargetQYPM(0,500)
  GetIncreaseToTargetZL(0,2100)
})

const Year=ref(0)
const QYPM=ref(0)
const HZKH=ref(0)
const ZL=ref(0)





/**
 * count初始值
 * target目标值
 *
 * @constructor
 */
function GetIncreaseToTargetYear(count,target) {
  let num=0
  const intervalId = setInterval(() => {
    if (count < target) {
      count += 10;
    Year.value=count
    } else {
      clearInterval(intervalId); // 达到目标值后清除定时器
    }
  }, 1);
}
// 专利数字
function GetIncreaseToTargetZL(count,target) {
  let num=0
  const intervalId = setInterval(() => {
    if (count < target) {
      count += 10;
      ZL.value=count
    } else {
      clearInterval(intervalId); // 达到目标值后清除定时器
    }
  }, 1);
}
// 合作客户
function GetIncreaseToTargetHZKH(count,target) {
  let num=0
  const intervalId = setInterval(() => {
    if (count < target) {
      count += 10;
      HZKH.value=count
    } else {
      clearInterval(intervalId); // 达到目标值后清除定时器
    }
  }, 1);
}
// 企业排名
function GetIncreaseToTargetQYPM(count,target) {
  let num=0
  const intervalId = setInterval(() => {
    if (count < target) {
      count += 10;
      QYPM.value=count
    } else {
      clearInterval(intervalId); // 达到目标值后清除定时器
    }
  }, 1);
}
</script>

<style scoped lang="scss">
.WG2 {

  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    padding-top: 25%;
  }
  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    padding-top: 15%;
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    padding-top: 10%;
  }
  width: 100%;
  height: 100%;

  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("/src/assets/WeGao/mini/4.jpg");
}

.Left {
  color: white;
  width: 100%;
  height: 30%;
  background: rgba(0, 0, 0, 0);
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    padding-left: 5%;
  }
  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    padding-left: 10%;
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    padding-left: 10%;
  }
}

.LeftOne {
  font-weight: 600;
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    font-size: 30px;
    padding-top: 5%;
  }
  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    font-size: 40px;
    padding-top: 5%;
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    padding-top: 2%;
    font-size: 50px;
  }
}

.LeftTwo {
  padding-top: 5%;
}

.Bottom {
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    padding-left: 5%;
  }
  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    padding-left: 10%;
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    padding-left: 5%;
  }
}

.BottomOne {
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    margin-top: 5%;
  }
  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    margin-top: 5%;
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    margin-top: 5%;
  }
}

.BottomTwo {
  display: flex;
  margin-top: 10%;
}

.BottomTwoOne {
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    display: none;
  }
  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    display: none;
  }
  width: 20%;
  padding: 1.5rem 1rem 1.5rem 1rem;
  border-radius: 0.5rem 0.5rem 0.5rem 0.1rem;
  border: 0.1rem solid white;
}

.BottomTwoTwo {
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    display: none;
  }
  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    display: none;
  }
  width: 20%;
  margin-left: 2%;
  padding: 1.5rem 1rem 1.5rem 1rem;
  border-radius: 0.5rem 0.5rem 0.5rem 0.1rem;
  border: 0.1rem solid white;
}

.BottomTwoThree {
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    display: none;
  }
  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    display: none;
  }
  width: 20%;
  margin-left: 2%;
  padding: 1.5rem 1rem 1.5rem 1rem;
  border-radius: 0.5rem 0.5rem 0.5rem 0.1rem;
  border: 0.1rem solid white;
}

.BottomTwoTitle {
  color: white;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.TitleButtonOne {
  padding: 0.5rem 1rem 0.5rem 1rem;
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  border: 0.1rem solid white;
  transform: skewX(-15deg); /* 根据需要调整斜切的度数 */
  overflow: hidden; /* 确保内容不会被斜切 */
  display: flex;
  align-items: center;
  color: white;

  .icon {
    margin-left: 0.5rem;
    fill: none;
  }
}

.TitleButtonOne:hover {
  background: radial-gradient(circle at center, purple, transparent);
  animation: spreadToPurple 2s ease-out forwards;

  .icon {
    margin-left: 0.5rem;

    .iconPath {
      stroke: #00559b;
    }
  }
}

.TitleButtonTwo {

  padding: 0.5rem 1rem 0.5rem 1rem;
  border-radius: 0.5rem 0.5rem 0.5rem 0.5rem;
  border: 0.1rem solid white;
  transform: skewX(-15deg); /* 根据需要调整斜切的度数 */
  overflow: hidden; /* 确保内容不会被斜切 */
  display: flex;
  align-items: center;
  color: white;

  .icon {
    margin-left: 0.5rem;
    fill: none;
  }
}

.TitleButtonTwo:hover {
  background: radial-gradient(circle at center, purple, transparent);
  animation: spreadToPurple 2s ease-out forwards;

  .icon {
    margin-left: 0.5rem;

    .iconPath {
      stroke: #00559b;
    }
  }
}

@keyframes spreadToPurple {
  0% {
    color: #00559b;
    background-size: 0 0;
  }
  100% {
    color: #00559b;
    background-size: 100% 100%;
  }
}

.Right {
  color: white;
  width: 100%;
  height: 100%;
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    padding-left: 5%;
  }
  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    padding-left: 10%;
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    padding-left: 10%;
  }
}
.RightTitle{
  /* 当视窗宽度小于 600px 时 */
  @media (max-width: 600px) {
    font-size: 30px;
  }
  /* 当视窗宽度在 600px 和 900px 之间时 */
  @media (min-width: 601px) and (max-width: 900px) {
    font-size: 40px;
  }
  /* 当视窗宽度大于 900px 时 */
  @media (min-width: 901px) {
    font-size: 50px;
  }
}

.RightTop {
  display: flex;
  height: 50%;
}

.RightBottom {
  display: flex;
  height: 50%;
}

.RightTopOne {
  margin: 2%;
  padding:3% 3% 3% 3% ;
  width: 23%;
}

.RightTopTwo {
  margin: 2%;
  padding:3% 3% 3% 3% ;
  width: 23%;
}

.RightBottomOne {

  margin: 2%;
  padding:3% 3% 3% 3% ;
  width: 23%;
}

.RightBottomTwo {

  margin: 2%;
  padding:3% 3% 3% 3% ;
  width: 23%;
}




.v-enter-active {
  transition: all 2s ease-out;
}

.v-leave-active {
  transition: all 0.8s cubic-bezier(1, 0.5, 0.8, 1);
}

.v-enter-from,
.v-leave-to {
  transform: translateY(2rem);
  opacity: 0;

}
</style>

